<!--登录页-->
<template>
  <div class="bg">
    <el-container>
      <el-header>
        <img src="/img/login/EducationAssetManagementSystem.png"
             class="headerImg">
      </el-header>
      <el-main>
        <el-card shadow="hover" class="main">
          <el-row>
           <el-col :span="12">
<!--             <img src="/img/login/background.png" class="colImg">-->
             <video class="colImg noSelect"
                    autoplay
                    loop
                    muted
                    src="/img/login/test1.mp4">
             </video>
           </el-col>
            <el-col :span="12" class="colMain">
              <h1>欢迎来到高校资产管理系统</h1>
              <h1>Welcome！</h1>
              <el-tabs v-model="activeName" class="demo-tabs">
                <el-tab-pane label="根据用户工号密码登录" name="first">
                  <el-form label-position="top" class="inputType">
                    <el-form-item label="JobNumber">
                      <el-input v-model="form.jobNumber"
                                placeholder="请输入工号">
                        <template #prefix>
                          <el-icon class="el-input__icon"><User /></el-icon>
                        </template>
                      </el-input>
                    </el-form-item>
                    <el-form-item label="Password">
                      <el-input v-model="form.password"
                                placeholder="请输入密码"
                                show-password
                                @keydown.enter="login">
                        <template #prefix>
                          <el-icon class="el-input__icon"><Monitor /></el-icon>
                        </template>
                      </el-input>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary"
                                 @click="login"
                                 class="btn">
                          LOGIN
                      </el-button>
                    </el-form-item>
                  </el-form>
                  <div class="spanText">
                    <span>(体验账号:20250101 密码:123456)</span>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="根据电话密码登录" name="second">
                  <el-form label-position="top" class="inputType">
                    <el-form-item label="Phone">
                      <el-input v-model="backup.phone"
                                placeholder="请输入电话号码">
                        <template #prefix>
                          <el-icon class="el-input__icon"><Phone /></el-icon>
                        </template>
                      </el-input>
                    </el-form-item>
                    <el-form-item label="Password">
                      <el-input v-model="backup.password"
                                placeholder="请输入密码"
                                show-password
                                @keydown.enter="backupLogin">
                        <template #prefix>
                          <el-icon class="el-input__icon"><Monitor /></el-icon>
                        </template>
                      </el-input>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary"
                                 @click="backupLogin"
                                 class="btn">
                        LOGIN
                      </el-button>
                    </el-form-item>
                  </el-form>
                  <div class="spanText">
                    <span>(体验账号:13245768864 密码:123456)</span>
                  </div>
                </el-tab-pane>
              </el-tabs>
            </el-col>
          </el-row>
        </el-card>
      </el-main>
      <el-footer>
        <p class="footer-text">技术支持:创造CREATE有限公司 Copyright &copy; 2021-2025</p>
      </el-footer>
    </el-container>
  </div>
</template>

<script setup>
import {ref} from "vue";
import axios from "axios";
import qs from "qs";
import router from "@/router";

const activeName = ref('first');
const form = ref({
  jobNumber:'',
  password:'',
});
const login = () => {
  let data = qs.stringify(form.value);
  axios.post(BASE_URL+'/v1/user/login', data)
      .then((response) => {
        if (response.data.code === 2000) {
          OKInfo('登录成功')
          router.push('/').then(() => {
            window.location.reload();
          });
          localStorage.setItem('user', JSON.stringify(response.data.data));
        } else {
          errorInfo('登录失败')
          form.value = {
            jobNumber: '',
            password: ''
          }
        }
      })
}
const backup = ref({
  phone:'',
  password:'',
});
const backupLogin = ()=>{
  let data = qs.stringify(backup.value);
  axios.post(BASE_URL+'/v1/user/backup', data)
      .then((response) => {
        if (response.data.code === 2000) {
          OKInfo('登录成功');
          router.push('/').then(() => {
            window.location.reload();
          });
          localStorage.setItem('user', JSON.stringify(response.data.data))
        } else {
          errorInfo('登录失败')
          backup.value = {
            phone: '',
            password: ''
          }
        }
      })

}
</script>

<style scoped>
.bg {
  height: 100vh;
  overflow: hidden;
  background-color: #9fa3a8;
}
.headerImg {
  width: 200px;
  margin-top: 10px;
}
.main {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1000px;
  height: 600px;
  background-color: rgb(255, 255, 255);
  border-radius: 40px;
}
.colImg {
  //width: 500px;
  height: 600px;
}
.noSelect {
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none; /* Standard */
  pointer-events: none; /* 禁止所有点击事件 */
}
.colMain {
  padding: 40px;
  box-sizing: border-box;
}
.inputType{
  margin-top: 20px;
  width: 100%;
}
.btn{
  margin-top: 40px;
  width: 100%;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  border-radius: 20px;
}
.footer-text {
  position: fixed;
  bottom: 4%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 16px;
  text-align: center;
  margin: 0 auto;
  color: #fff;
}
.spanText {
  text-align: center;
  color: #666;
  font-size: 14px;
  padding: 10px 0;
}
</style>
<style>
.el-card__body{
  padding: 0;
}
</style>